<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<c:set var="ctx" value="<%=basePath%>" />
<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    <title>治疗小结</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="云净,透析单,网页透析" />
	<meta http-equiv="description" content="云净透析单" />
	<link href="${ctx}image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="${ctx}bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}bootstrap/css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/weui/weui.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/yunjing/mtxform.css?v=201708311653" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/xgtl_wdbj.css" />
	
  </head>
  <body>
    <jsp:include page="/txform/mtxformhead.shtml"  flush="true" >
       <jsp:param name="select_module" value="治疗小结"/>
    </jsp:include> 
    <style>
    	#tx_form td{
    		vertical-align: middle;
    	}
    	.scroll-wrapper {  
		    -webkit-overflow-scrolling: touch;  
		    overflow-y: scroll; 
		}
    </style>
   <form id="tx_form" title="mtxform_hzzlxj_save"> 
   <table class="table table_info page_confirm_table">
     <tr class="back_tr">
	     <td style="padding: 0px;">
	       <div class="head_user_prev"><img src="https://biangene.oss-cn-shenzhen.aliyuncs.com/mtxform/${user_id.substring(0, 4)}_${tx_number}.png?x-oss-process=image/resize,w_220,h_220/quality,Q_80"  class="head_user_pic"   alt="头像" /></div>
	       <div class="head_user_content">
		      <div class="head_user_module"><a href="javascript:void(0);" class="head_user_a" ><span class="head_user_name">${param.tx_name}</span></a> <span id="head_txstarttime"></span></div>
		      <div class="head_user_module"><span>[透析号：${tx_number}]</span></div>
		      <div class="head_user_module">[机号：<span class="head_tx_txj_id"></span>]</div>
	        </div>
	     </td>
	     <td align="right" valign="middle" style="padding-left: 0px;vertical-align: middle;">
	       <div class="head_confirm_username" >${txzlxj.tx_confirm_username}</div>
		   <div class="head_confirm_status">未确认</div> 
	     </td>
	     <td align="right" style="padding-left: 0px;vertical-align: middle;">
	       <c:if test="${userinfo.USER_PERMISSION!='5'}">
		     <button  data-module="3" type="button" class="btn btn-default head_confirm_btn save_txform">确认</button>
	       </c:if> 
         </td>
    </tr>
   </table>  
   <!-- <div class="xgtl_ccwd_page"><br>位点标记<br></div> -->
 <div class="tx_content"> 
   <input type="hidden"  name="token" class="token" value="${zlxj_token}" />
   <input type="hidden" name="tx_number" id="tx_number" value="${tx_number}" />
   <input type="hidden" name="tx_time"  value="${param.tx_time}" />
   <table class="table table_info">
   <tr><td colspan="3" class="info_block"></td></tr>
   <tr>
     <td align="right" ><div class="page_info_lable">穿刺/换药</div></td>
     <td class="local_check_page">
       <div class="page_info"><input type="text" class="info_input"  name="tx_fs" value="<c:choose><c:when test="${empty txzlxj.tx_ccfs|| empty txzlxj.tx_ccz}">换药</c:when><c:otherwise>穿刺</c:otherwise></c:choose>" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td align="right" class="local_check_page"><a href="javascript:void(0);" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr>
   
   <tr class="tx_common hidden" >
     <td align="right" ><div class="page_info_lable tx_hs">穿刺护士</div></td>
     <td class="select_page">
       <div class="page_info">
        <input type="hidden" class="info_input_id" name="tx_sj_nurse_id" value="${txzlxj.tx_sj_nurse_id}" />
        <input type="text" class="info_input"  name="tx_sj_nurse" value="${txzlxj.tx_sj_nurse}" readonly="readonly" placeholder="请选择"  /> 
       </div>
     </td>
     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr>
	    
   <tr class="tx_cc hidden">
     <td align="right" ><div class="page_info_lable">穿刺方式</div></td>
     <td class="check_page">
       <div class="page_info"><input type="text" class="info_input"  name="tx_ccfs" value="${txzlxj.tx_ccfs}" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccfs" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
    
   <tr class="tx_cc hidden">
     <td align="right" ><div class="page_info_lable">穿刺针</div></td>
     <td class="check_page">
       <div class="page_info"><input type="text" class="info_input"  name="tx_ccz" value="${txzlxj.tx_ccz}" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccz" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
	
    <tr class="hidden tx_ccfx tx_new tx_cc">
     <td align="right" ><div class="page_info_lable">A端穿刺方向</div></td>
     <td class="check_page">
       <div class="page_info"><input type="text" class="info_input"  name="tx_ccfx" value="${txzlxj.tx_ccfx}" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccfx" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
   
   <tr class="hidden tx_tlpic tx_new tx_cc">
     <td align="right" ><div class="page_info_lable">通路图片</div></td>
     <td>
       <div class="page_info" id="viewMarkPic">点击查看</div>
     </td>
     <td align="right" ><a href="javascript:void(0);"  ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
   
   <tr class="hidden tx_ccwd tx_new tx_cc">
     <td align="right" ><div class="page_info_lable">穿刺位点</div></td>
     <td class="check_page xgtl_ccwd_page">
       <div class="page_info">
        <input type="hidden" class="info_input"  name="tx_ccwd_a" id="selectMark_a" value="${txzlxj.tx_ccwd_a}" readonly="readonly" placeholder="请选择"  />
	    <input type="hidden" class="info_input"  name="tx_ccwd_v" id="selectMark_v" value="${txzlxj.tx_ccwd_v}" readonly="readonly" placeholder="请选择"  /> 
        <input type="text" class="info_input" readonly unselectable="on" onfocus="this.blur()" name="tx_ccwd" id="selectMark_show" value="<c:if test="${not empty txzlxj.tx_ccwd_a && not empty txzlxj.tx_ccwd_v}">A端：${txzlxj.tx_ccwd_a},V端：${txzlxj.tx_ccwd_v}</c:if>" readonly="readonly" placeholder="请选择"  /> 
       </div>
     </td>
     <td align="right" class="check_page"><a href="javascript:void(0);"  title="" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 		
   
   <tr>
     <td align="right" ><div class="page_info_lable">治疗护士</div></td>
     <td class="select_page">
       <div class="page_info">
        <input type="hidden" class="info_input_id" name="tx_zl_nurse_id" value="${txzlxj.tx_zl_nurse_id}" />
        <input type="text" class="info_input"  name="tx_zl_nurse" value="${txzlxj.tx_zl_nurse}" readonly="readonly" placeholder="请选择"  /> 
       </div>
     </td>
     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr>
   
   <tr>
     <td align="right" ><div class="page_info_lable">核对护士</div></td>
     <td class="select_page">
       <div class="page_info">
        <input type="hidden" class="info_input_id" name="tx_hd_nurse_id" value="${txzlxj.tx_hd_nurse_id}" />
        <input type="text" class="info_input"  name="tx_hd_nurse" value="${txzlxj.tx_hd_nurse}" readonly="readonly" placeholder="请选择"  />
       </div>
     </td>
     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr>  
   
   <tr>
     <td align="right" ><div class="page_info_lable">下机护士</div></td>
     <td class="select_page">
       <div class="page_info">
        <input type="hidden" class="info_input_id" name="tx_xj_nurse_id" value="${txzlxj.tx_xj_nurse_id}" />
        <input type="text" class="info_input"  name="tx_xj_nurse" value="${txzlxj.tx_xj_nurse}" readonly="readonly" placeholder="请选择"  /> 
       </div>
     </td>
     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr>  
   
   <tr>
     <td align="right" ><div class="page_info_lable">治疗医生</div></td>
     <td class="select_page">
       <div class="page_info">
        <input type="hidden" class="info_input_id" name="tx_zl_doctor_id" value="${txzlxj.tx_zl_doctor_id}" />
        <input type="text" class="info_input"  name="tx_zl_doctor" value="${txzlxj.tx_zl_doctor}" readonly="readonly" placeholder="请选择"  />
       </div>
     </td>
     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_ys" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
   
   <tr>
     <td align="right" ><div class="page_info_lable">患者签名</div></td>
     <td class="" colspan="2">
       <div class="page_info" id="signStatusWrap">
        <input type="text" class="info_input"  name="tx_hz_qm" value="${empty txzlxj.tx_hz_qm?'/':'已签名'}" readonly="readonly" placeholder="请选择"  />
       </div>
     </td>
   </tr> 
   
   
   <tr>
     <td align="right" ><div class="page_info_lable">透后宣教</div></td>
     <td class="check_page" onclick="setContent('tx_zlxj_content');">
       <div class="page_info"><input type="text" class="info_input"  name="tx_xj_muban" value="${txzlxj.tx_xj_muban}" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td align="right" class="check_page" onclick="setContent('tx_zlxj_content');"><a href="javascript:void(0);"    title="tx_txxj" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
   <tr>
    <td colspan="3">
     <textarea name="tx_zlxj_content" rows="10" cols="" wrap="soft"  class="info_textarea" placeholder="请输入..." >${txzlxj.tx_zlxj_content}</textarea>
    </td>
   </tr>
 
   <tr><td colspan="3" class="info_block"></td></tr>
   <tr>
     <td align="right" width="150px"><div class="page_info_lable">透析小结</div></td>
     <td  class="check_page" onclick="setContent('tx_zlxj_xj');">
        <div class="page_info"> <input type="text" class="info_input"  name="tx_xiaojie_name" value="" readonly="readonly" placeholder="请选择"  /> </div>
     </td>
     <td class="check_page" onclick="setContent('tx_zlxj_xj');"><a href="javascript:void(0);"   title="tx_xiaojie" ><img src="image/yunjing/mtxform/right-arrow.svg" class="modal_select_arrows" alt="选择" /></a></td>
   </tr> 
   <tr>
    <td colspan="3">
     <textarea name="tx_zlxj_xj" rows="10" cols="" wrap="soft" class="info_textarea" placeholder="请输入...">${txzlxj.tx_zlxj_xj}</textarea>
    </td>
   </tr>
 
   <tr><td colspan="3"></td></tr>
  </table>
 </div>
 </form>
 
 <div class="modal fade" id="select_Modal" role="dialog" style="display:none;" >
       <input type="hidden" name="input_type"  value=""   />
       <input type="hidden" name="input_name"  value=""  />
       <input type="hidden" name="input_id"  value=""  />
       <input type="hidden" name="input_val"  value=""  />
       <input type="hidden" name="info_lable"  value=""  />
       <input type="hidden" name="dic_type"  value=""  />
       <input type="hidden" name="define_type"  value=""  />
       <div class="weui-cells weui-cells_radio modal_container">
         <table class="table table_info page_fixed_head_table">
		   <tr class="">
		     <td class="col-xs-4" align="left">
		          <a href="javascript:void(0);"  class="" data-dismiss="modal" >
		           <img src="image/yunjing/mtxform/goback.png"  alt="返回" class=""  />
		          </a>
		     </td> 
		     <td class="col-xs-4" align="center"><span class="back_title">治疗小结</span></td>
		     <td class="col-xs-4" align="right"><a href="javascript:void(0);"  class="modal_confirm_div" onclick=""><span class="back_save">保存</span></a></td>
		   </tr>
		   <tr><td colspan="3"><div class="modal_type_tittle"></div></td></tr>
	     </table>
         <div class="modal_content"></div> 
      </div>
  </div>
  
  <div class="modal fade" id="select_local_modal" role="dialog"  >
       <input type="hidden" name="local_input_name"  value=""  />
       <input type="hidden" name="local_input_val"  value=""  />
       <div class="weui-cells weui-cells_radio modal_container">
         <table class="table table_info page_fixed_head_table">
		   <tr class="">
		     <td class="col-xs-4" align="left">
		          <a href="javascript:void(0);"  class="" data-dismiss="modal" >
		           <img src="image/yunjing/mtxform/goback.png"  alt="返回" class=""  />
		          </a>
		     </td> 
		     <td class="col-xs-4" align="center"><span class="back_title">治疗小结</span></td>
		     <td class="col-xs-4" align="right"><a href="javascript:void(0);"  class="local_modal_confirm_button" onclick=""><span class="back_save">保存</span></a></td>
		   </tr>
	     </table> 
          <div class="local_modal_content" style="margin-top: 50px;">
	          <button type="button"  data-id="0"   data-name="穿刺" class="btn btn-default btn_common" onclick="selectone(this);" >穿刺</button>
	          <button type="button"  data-id="1"   data-name="换药" class="btn btn-default btn_common" onclick="selectone(this);" >换药</button>
          </div> 
      </div>
  </div>
  	
  	<style>
        /* 解决触摸延迟 */

        html {
            touch-action: manipulation;
        }

        html {
            font-size: 16px;
        }
		div.layui-layer-iframe.layui-layer-mtxform.scroll-wrapper{
			top: 0px;
		    left: 0px;
		    position: fixed;
		    bottom: 0;
		    right: 0;
		}
        @media screen and (width: 320px) {
            html {
                font-size: 16px;
            }
        }

        @media screen and (width: 375px) {
            html {
                font-size: 18.75px;
            }
        }

        @media screen and (width: 414px) {
            html {
                font-size: 20.7px;
            }
        }

        @media screen and (width: 380px) {
            html {
                font-size: 19px;
            }
        }

        @media screen and (width: 360px) {
            html {
                font-size: 18px;
            }
        }

        #closeSign {
            position: absolute;
            height: 2.13333rem;
            width: 2.13333rem;
            top: 0;
            right: 0;
            background: url(${ctx}image/yunjing/mtxform/close-icon.svg) no-repeat center center/50% 50%;
        }

        #signArea {
            background: #FFF;
            margin: 0 auto;
            height: 14.93333rem;
        }

        #signArea .title-a {
            height: 2.13333rem;
            line-height: 2.13333rem;
            background: #5FAEF0;
            color: #FFF;
            text-align: center;
            font-size: 18px !important;
            position: relative;
        }

        #signArea .content-wrap {
            padding: 10px;
        }

        #signArea .save-sign,
        #signArea .cancel-sign {
            height: 1.6rem;
            width: 4rem;
            font-size: 16px;
            border-radius: 2px;
            out-line: 0;
        }

        #signArea .save-sign {
            background: #5FAEF0;
            margin-right: 0.32rem;
            border: 0;
            color: #fff;
        }

        #signArea .cancel-sign {
            border: thin solid #DDD;
        }

        #signature {
            border: 1px solid #DDD;
            border-radius: 2px;
        }

        a[title="站长统计"] {
            display: none;
        }

        #signature {
            color: black;
            background-color: #ffffff;
        }

        #signWrap {
            position: fixed;
            z-index: 10000010;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.18);
            padding-top: 16vh;
            justify-content: center;
        }

        #signWrap.flex {
            display: flex !important;
        }

        .disable-touch {
            touch-action: none;
        }

        #signWrap.none {
            display: none;
        }

        #loadingStatus {
            background-color: rgb(92, 184, 92);
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
            background-size: 40px 40px;
            box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
            box-sizing: border-box;
            color: rgb(255, 255, 255);
            border-radius: 10px;
        }

        #signature {
            color: #000;
        }
		
        #signArea .title-a span{
        	font-size:18px;
        }
		.sign-color{
			color:#EF2525;
		}
		
        @media only screen and (min-width: 500px) {
            #signWrap {
                padding-top: 0;
                align-items: center;
            }
            #signArea {
                width: 500px;
                height: 300px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
                height: 260px;
                width: 500px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 208px;
                width: 486px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 206px !important;
                width: 484px !important;
            }
        }
        
        /*  竖屏平板大于600的样式  */
		@media only screen and (min-width:598px) and (max-width:700px) {
            #signWrap {
                padding-top: 150px;
                align-items: flex-start;
            }
            #signArea {
                width: 598px;
                height: 452px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
            	width: 598px;
                height: 352px;
                padding: 12px 12px 0 12px !important;
            }
            #signature {
            	width: 574px;
                height: 340px;
                margin-bottom: 12px;
            }
            #signature canvas.jSignature {
            	width: 572px !important;
                height: 338px !important;
            }
            #signArea .cancel-sign,#signArea .save-sign{
            	font-size:18px;
            	padding:4px;
            	width:76px;
            	height:34px;
            }
        }
        
        @media only screen and (min-width:700px) and (min-height:700px){
        	#signWrap {
                padding-top: 150px;
                align-items: flex-start;
            }
        }
		@media all  and (min-width:700px) {
            #signArea {
                width: 700px;
                height: 452px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
            	width: 700px;
                height: 352px;
                padding: 12px 12px 0 12px !important;
            }
            #signature {
            	width: 676px;
                height: 340px;
                margin-bottom: 12px;
            }
            #signature canvas.jSignature {
            	width: 674px !important;
                height: 338px !important;
            }
            #signArea .cancel-sign,#signArea .save-sign{
            	font-size:18px;
            	padding:4px;
            	width:76px;
            	height:34px;
            }
        }
        #signArea .title-a{
       	    border-top-left-radius: 2px;
    		border-top-right-radius: 2px;
        }
        #signArea  {
        	border-radius: 2px;
        }
        @media screen and (max-width: 500px) {
            #signArea {
                width: 352px;
                height: 260px;
            }
            #signArea .title-a,
            #closeSign {
                height: 38px;
                line-height: 38px;
            }
            #signArea .content-wrap {
                height: 198px;
                width: 352px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 172px;
                width: 340px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 170px !important;
                width: 338px !important;
            }
        }

        @media all and (orientation: landscape) and (max-width: 699px){
            /*　　这是匹配横屏的状态，横屏时的css代码　*/
            #signWrap {
                padding-top: 0;
                align-items: center;
            }
            #signArea {
                width: 500px;
                height: 300px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
                height: 260px;
                width: 500px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 208px;
                width: 486px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 206px !important;
                width: 484px !important;
            }
        }

		@media only screen and (orientation : landscape) and (width: 736px) {/*　　这是匹配6plus横屏的状态，横屏时的css代码　　*/
			#signWrap { 
			 padding-top:0;
			 align-items: center;
			}
			#signArea{
				width:480px;
				height:366px;
			}
			#signArea .title-a,#closeSign{
				height:40px;
				line-height:40px;
			}
			#signArea .content-wrap{
				height:272px;
				width:480px;
				padding:6px 6px 0 6px !important;
			} 
			#signature{
				height:260px;
				width:468px;
				margin-bottom:14px;
			}
			#signature canvas.jSignature{
				height:258px !important;
				width:466px !important;
			}
		}

        @media only screen and (width: 414px) {

            #signWrap {
                padding-top: 86px important;
                justify-content: center;
            }
            #signArea {
                width: 400px !important;
                height: 310px !important;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px !important;
                line-height: 40px !important;
            }
            #signArea .content-wrap {
                height: 220px !important;
                width: 400px !important;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 214px !important;
                width: 386px !important;
                margin-bottom: 8px !important;
            }
            #signature canvas.jSignature {
                height: 212px !important;
                width: 384px !important;
            }
        }
    </style>
	<div id="signWrap" class="none">
        <div id="signArea">
            <div class="title-a">
                <span>签&nbsp;名</span>
                <div id="closeSign"></div>
            </div>
            <div class="content-wrap">
                <div id="signature">

                </div>
                <div style="text-align: center;position:relative;">
                    <div id="loadingStatus" style="height:20px;position:absolute;left:0;top:-86px;width:0;">
                        <span style="position:absolute;top:-30px;left:50%;transform: translate(-50%, 0); min-width:90px;height:20px;font-size:14px;color:#5FAEF0;"></span>
                    </div>
                    <button type="button" onclick="jSignature_img()" class="save-sign">保存</button>
                    <button type="button" onclick="reset()" class="cancel-sign">取消</button>
                    <!-- <button type="button" id="c" class="cancel-sign">取消</button> -->
                </div>
            </div>
        </div>
    </div>   
  </body>
  <style>
    .local_modal_confirm_div {
	    text-align: center;
	    padding-bottom: 20px;
	    padding-top: 20px;
     }
    .local_modal_confirm_button {
	    color: #0ACCDD;
	    background-color: #FFFFFF;
	 }
	 .margin-top120{
	 	margin-top:120px !important;
	 	position:fixed;
	 	z-index:1002;
	 	width:100vw;
	 	height:20vh;
	 	top:0;
	 	left:0;
	 	background:#fff;
	 	padding:6px;
	 }
  </style>
  
  <!-- 查看通路图片S -->
    <div id="view-markpic-wrap" style="display:none;">
        <div class="shadow"></div>
        <div id="markpicWarp2" >
	        <div class="mtx-markpic-wrap">	
	        	<div id="point_mark_img_wrap1" style="width:100%;padding:0;border:0;"><img src="" alt="血管通路图片"></div>
	            <div class="close-view-img_" ><span class="close-view-img">×</span></div>
        	</div>
        </div>
    </div>
    
    <!-- 选择位点及查看位点记录S -->
    <div id="mtxselectCcwdWrap" style="display:none;">
    	<div class="wd-box">
    		<div style="min-height:800px;padding: 0 6px 30px 6px;position:relative;">
    			<div class="mark-pic-top">
		            <div class="back" style="padding:4px;width:60px;height:42px;" onclick="closedMarkList()"><img src="image/yunjing/mtxform/go_back.svg" style="width:24px;height:24px;" class="goback_arrows" alt="返回" /></div>
		            <div class="title process-name" style="font-size:18px;">穿刺位点</div>
		            <div class="save-mark" style="width:76px;text-align:right;" onclick="saveMarkList()">保存</div>
		        </div>
		        <div class="title-2 title" style="position:relative;">穿刺位点<span style="position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);color:red;" id="mark_tips"></span></div>
    			<div>
		        	<form class="form-inline" onsubmit="return false;" style="padding: 10px 4px;font-size:15px;">
			          <table class="table-condensed" style="width: 100%;">
			              <tbody>	             
				              <tr class="tr_head">
						        <td style="width:50%">
							       <div style="position:relative;width:100%;">   
							          <span>A端位点：</span>
								      <select class="form-control form-control2" name="tx_bc" id="xgtl_mark_a" onchange="selectMarkA('#xgtl_mark_a','.mark-target-a');">
							          </select>
							        </div>  
						         </td> 
							     <td class="mtxform_td_padding" style="text-align:right;width:50%;">
								    <div style="position:relative;width:100%;">   
								       <span>V端位点：</span> 
								       <select class="form-control form-control2" name="tx_order" id="xgtl_mark_v" onchange="selectMarkA('#xgtl_mark_v','.mark-target-v');">
								       </select>
								    </div>    
							     </td>
					          </tr>
				         </tbody>
			         </table>
			       </form>
		        </div>
		        
		        <!-- 位点图片S -->
		        <div style="position:relative;padding: 2px;background-color: #fff;border: 1px solid #ddd;border-radius: 2px;">
			        <div id="point_mark_img_wrap1_m" style="width:100%;padding:0;border:0;">
			        	<img id="ossPointMarkImg_m" style="max-width:100%;" class="point-mark-img" alt="血管通路图">
			        </div>
			    </div>
			    <!-- 位点图片E -->
			    
			    <div style="position:relative;height:60px;display:flex;justify-content: center;align-items: center;border-bottom: thin solid #ddd;">
			     	<span id="change_pic_btn" style="display:inline-block;width:100px;height:32px;line-height:32px;font-size:16px;color:#fff; cursor: pointer;background:#35a2e7;border-radius:2px;text-align:center;">更换图片</span>	
			    </div>
			    <input type="file" class="upload_input" name="mark_img" id="changePicInput" 
								style="width:180px;cursor: pointer;height:35px;position:absolute;left:2000px;top:0;opacity:0;" accept="image/*" >
			    <div class="title mark-list-title" style="margin:8px 0 6px 0;"><span class="line"></span><span>近10次位点记录：</span></div>
			    <div id="pointMarkList">
  					<table class="table table-bordered">
  						<tbody>
		  					<tr class="mark-thead-tr">
		  						<td class="mark-date mark-date-th">日期</td>
		  						<td class="mark-point mark-point-th">位点</td>
		  						<td class="other-case other-case-th">内瘘</td>
		  					</tr>
  						</tbody>
		  				<tbody id="markListTbody">
		  					 <%-- <c:forEach items="${wdjl}" var="jl"  varStatus="status" >
			  					<tr>
			  						<td class="mark-date">${jl.tx_txsj}</td>
			  						<td class="mark-point mark-point-text">
			  							<p>A端：<span class="mark-a">${jl.tx_ccwd_a}</span></p>
			  							<p>V端：<span class="mark-v">${jl.tx_ccwd_v}</span></p>
			  						</td>
			  						<td class="other-case">
			  							<p>透前：<span>${jl.tq_nl}</span></p>
			  							<p>透后：<span>${jl.th_nl}</span></p>
			  						</td>
			  					</tr>
		  					 </c:forEach> --%>
		  				</tbody>
		  			</table>
  				</div>	
    		</div>
    	</div>
    </div>
  <script type="text/template" id='markListTpl_a'>
         {{each data as v i}}
            <tr>
                <td class="mark-date">{{data[i].tx_txsj}}</td>
                <td class="mark-point mark-point-text">
                    <p style="margin-bottom:4px;">A端：
                        <span class="mark-a">{{data[i].tx_ccwd_a}}</span>
                    </p>
                    <p style="margin-bottom:4px;">V端：
                        <span class="mark-v">{{data[i].tx_ccwd_v}}</span>
                    </p>
                </td>
                <td class="other-case">
                    <p style="margin-bottom:4px;">透前：
                        <span>{{data[i].tq_nl}}</span>
                    </p>
                    <p style="margin-bottom:4px;">透后：
                        <span>{{data[i].th_nl}}</span>
                    </p>
                </td>
            </tr>
         {{/each}}
  </script>
  <script type="text/javascript" src="js/signature/jSignature.js"></script>
  <script type="text/javascript" src="js/upload/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
  <script type="text/javascript" src="js/upload/upload.js"></script>
  <script type="text/javascript" src="js/common/base64.min.js"></script>
  <script type="text/javascript" src="js/template-web.js"></script>
  <script>
	 $(function(){
	   //未开始透析并且未确认小结时透析时默认上一次
	   var tx_status=$("input[name=tx_status]").val();
	   if(tx_status<2 && ""=="${txzlxj.tx_confirm_username}"){
	      //判断穿刺方式
	      if("${lastzlxj.tx_ccfs}"!=""||"${lastzlxj.tx_ccz}"!=""){
	         $("tr.tx_common").removeClass("hidden");
		     $("tr.tx_cc").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	         $("input[name='tx_fs']").val("穿刺");
		     $("input[name='tx_ccfs']").val("${lastzlxj.tx_ccfs}");
		     $("input[name='tx_ccz']").val("${lastzlxj.tx_ccz}");
		     $("input[name='tx_ccfx']").val("${lastzlxj.tx_ccfx}");
		     //是否包含绳梯法
		     if("${lastzlxj.tx_ccfs}".indexOf("绳梯法")>=0){
			   $("tr.tx_tlpic").addClass("hidden");
	           $("tr.tx_ccfx").removeClass("hidden");
	           $("tr.tx_ccwd").removeClass("hidden");
	           //穿刺位点
	           $("input[name='tx_ccwd_a']").val("${lastzlxj.tx_ccwd_a}");
	           $("input[name='tx_ccwd_v']").val("${lastzlxj.tx_ccwd_v}");
	           $("input[name='tx_ccwd']").val(("${lastzlxj.tx_ccwd_a}"!="" && "${lastzlxj.tx_ccwd_v}"!="")?"A端：${lastzlxj.tx_ccwd_a},V端：${lastzlxj.tx_ccwd_v}":"");
			 }else{
			   $("tr.tx_ccwd").addClass("hidden");
	           $("tr.tx_ccfx").removeClass("hidden");
	           $("tr.tx_tlpic").removeClass("hidden");
	           $("input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
			 }
	      }else{
	      //换药
	         $("tr.tx_common").removeClass("hidden");
		     $("tr.tx_cc").addClass("hidden");$("div.tx_hs").text("换药护士");
		     $("input[name='tx_ccfs'],input[name='tx_ccz'],input[name='tx_ccfx'],input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
	      }
	   }else{
	       //判断穿刺方式
		   if(""=="${txzlxj.tx_ccfs}"||""=="${txzlxj.tx_ccz}"){
		       $("tr.tx_common").removeClass("hidden");
			   $("tr.tx_cc").addClass("hidden");$("div.tx_hs").text("换药护士");
			   $("input[name='tx_ccfs'],input[name='tx_ccz'],input[name='tx_ccfx'],input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
		   }else{
		       $("tr.tx_common").removeClass("hidden");
			   $("tr.tx_cc").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
			    //判断绳梯法
			   if("${txzlxj.tx_ccfs}".indexOf("绳梯法")>=0){
				   $("tr.tx_tlpic").addClass("hidden");
		           $("tr.tx_ccfx").removeClass("hidden");
		           $("tr.tx_ccwd").removeClass("hidden");
			   }else{
				   $("tr.tx_ccwd").addClass("hidden");
		           $("tr.tx_ccfx").removeClass("hidden");
		           $("tr.tx_tlpic").removeClass("hidden");
		           $("input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
				}
		   }
	   }
	 
	   $.post("txform/dic.shtml",{"dictype":"tx_xiaojie"},function(data){
	        $.each(data.dic,function(key,item){
	             if('${txzlxj.tx_zlxj_xj}'==item.dicid||'${txzlxj.tx_zlxj_xj}'.indexOf(item.dicid)>=0){
	               $("input[name='tx_xiaojie_name']").val(item.dicname);
	             }
	        });
	   });
	     
	   $(".local_check_page").click(function(){ 
	      var $ele=$(this).parent("tr").find("input");
	      $("input[name='local_input_name']").val($ele.attr("name"));
	      $("div.local_modal_content").find("button.btn_common[data-name='"+$ele.val()+"']").addClass("btn_active");
	      $("#select_local_modal").modal("show");
	   });
	   
	   $("#select_local_modal").on("click",".local_modal_confirm_button",function(){
	       var va=$(".local_modal_content").find('button.btn_active').text();      //如果是单选
		   $("input[name='"+$("input[name='local_input_name']").val()+"']").val(va);//设置保存的input的值为选中的值
		   if(va=="穿刺"){
		      $("tr.tx_common").removeClass("hidden");
		      $("tr.tx_cc,tr.tx_ccfx").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
		      if($("input[name='tx_ccfs']").val().indexOf("绳梯法")>=0){
		      	$("tr.tx_ccwd").removeClass("hidden");
		      }else{
		      	$("tr.tx_tlpic").removeClass("hidden");
		      	$("input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
		      }
		   }
		   if(va=="换药"){
		      $("tr.tx_common").removeClass("hidden");
		      $("tr.tx_cc,tr.tx_ccwd,tr.tx_ccfx,tr.tx_tlpic").addClass("hidden");$("div.tx_hs").text("换药护士");
		      $("input[name='tx_ccfs'],input[name='tx_ccz'],input[name='tx_ccfx'],input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
		   }
	       $("#select_local_modal").modal('hide');	 
	   });
	 	
	   // 进入页面判断一次显示穿刺或者换药的选项
	   function tabViewCcHy(){
	   	   var va = $("input[name='tx_fs']").val(); 
		   if(va=="穿刺"){
		      $("tr.tx_common").removeClass("hidden");
		      $("tr.tx_cc,tr.tx_ccfx").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
		      if($("input[name='tx_ccfs']").val().indexOf("绳梯法")>=0){
		      	$("tr.tx_ccwd").removeClass("hidden")
		      	$("tr.tx_tlpic").addClass("hidden")
		      }else{
		      	$("tr.tx_tlpic").removeClass("hidden")
		      	$("tr.tx_ccwd").addClass("hidden")
		      }
		   }
		   if(va=="换药"){
		      $("tr.tx_common").removeClass("hidden");
		      $("tr.tx_cc,tr.tx_ccwd,tr.tx_ccfx,tr.tx_tlpic").addClass("hidden");$("div.tx_hs").text("换药护士");
		      $("input[name='tx_ccfs']").val("");
		      $("input[name='tx_ccz']").val("");
		      $("input[name='tx_ccfx']").val("");
              $("input[name='tx_ccwd_a']").val("");
              $("input[name='tx_ccwd_v']").val("");
              $("input[name='tx_ccwd']").val("");
		   }
	   }
	   tabViewCcHy()
	   				    
	   // 判断穿刺方式  
	   $(".save_txform").click(function(){
	       var tx_fs=$("input[name='tx_fs']").val();
	       if("穿刺"==tx_fs){
	          if(""==$("input[name='tx_ccfs']").val()){$("input[name='tx_ccfs']").val("无");}
	          if(""==$("input[name='tx_ccz']").val()){$("input[name='tx_ccz']").val("无");}
	       }
	   });  
	   
	   if($("#signStatusWrap input").val() == "已签名"){
	   		$("#signStatusWrap input").addClass("sign-color")
	   }
	   
	   //键盘弹出后显示输入框
	   $(".info_textarea").on("focus",function(){
	   		$(".page_header,.page_confirm_table").css("position","static")
	   		$(".page_header ").next("div").css("height","0");
	   })
	   $(".info_textarea").on("blur",function(){
	   		$(".page_header,.page_confirm_table").css("position","fixed")
	   		$(".page_header ").next("div").css("height","127px");
	   })
	   
	   //绑定点击事件
	   $("body").on("click",".modal_confirm_div",function(){ 
	      var info_lable=$("input[name=info_lable]").val();
	      if("穿刺方式"==info_lable){
	         var flag=0;
	         $("div.modal_content>button.btn_active").each(function(){
	           if($(this).text().indexOf("绳梯法")>=0){
			      flag=1;
		       }
			 });
			 if(flag==1){
			   $("tr.tx_tlpic").addClass("hidden");
	           $("tr.tx_ccfx").removeClass("hidden");
	           $("tr.tx_ccwd").removeClass("hidden");
			 }else{
			   $("tr.tx_ccwd").addClass("hidden");
	           $("tr.tx_ccfx").removeClass("hidden");
	           $("tr.tx_tlpic").removeClass("hidden");
			 }
	      }
	   });
	     getOSSAuth_xgtl() 
	  });	
  </script>
  <script>
  		// 显示通路图片
  		var xgtlTagId = ""; //数据库总保存位点标记的ID
  		var tx_number = '${tx_number}';
  		var user_id = '${user_id.substring(0, 4)}';
  		$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){//获取是否有位点标记历史记录ID
	     	if(res.status.length > 0){
		     	xgtlTagId = res.status[0].tx_id;
		     }
	     })
  		$("#tx_form").on("click","#viewMarkPic",function(){
  			var pic_view = $("#view-markpic-wrap");
  			var src = 'https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${user_id.substring(0, 4)}/${tx_number}.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&tag='+parseInt(Math.random()*1000);
  			pic_view.find("img").attr("src",src);
  			pic_view.find("img").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v=20180126';")
  			
  			//请求位点标记内容
  			$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
  				if(res.status.length == 0){
					return
				}
  				$("#point_mark_img_wrap1").find("div").remove();
				var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
				 	mark_A = mark_data.A,
				 	mark_V = mark_data.V,
				 	mark_T = mark_data.T;
				if(mark_data.status == "empty"){
	     			return false;
	     		}
				if(mark_A.length === 0 && mark_V == 0 && mark_T === 0){
					return
				}
				
				mark_A.map(function (i, v) {
					var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + '</div>';
						//console.log(markDom)
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_V.map(function (i, v) {
					//console.log(i)
					var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + '</div>';
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_T.map(function (i, v) {
					var markDom = '<div class="add-mark-text-wrap" style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%;">'
									+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
									+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
									+'</div>'	
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
				
				var scale = $("#point_mark_img_wrap1").outerWidth() / 600; //PC端的宽度为600，计算缩放比例
				//console.log($("#tx_form").width(),$("#point_mark_img_wrap1").width())
				$("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale,
						left = parseInt($that.position().left) * scale,
						top = parseInt($that.position().top) * scale;
					$that.css({
						"left": left + "px",
						"top": top + "px",
						"width": width + "px",
						"height": height + "px",
						"line-height": height + "px",
						"border-radius": height / 2 + "px"
					})
					
					var $line = $that.find(".mark-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
					if(scale < 0.7 ){
						$that.css({
							"font-size": "12px",
							"transform": "scale(1.2,1.2)"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.8333)"
						})
					}
					if(scale > 1 ){
						$that.css({
							"font-size": "24px"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg)"
						})
					}
				})
				
				$("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale;
					$that.css({
						"height": height + "px"
					})
					
					var $line = $that.find(".mark-text-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				})
  			})
  			pic_view.css("display","block");
  			pic_view.on("touchstart", "div,img",function (e) {
  				e.stopPropagation();
  			})
  			$("#markpicWarp2 .close-view-img_ , div.shadow").click(function(){
  				$("#view-markpic-wrap div.mtx-mark-tag , #view-markpic-wrap .add-mark-text-wrap").remove()
  				pic_view.css("display","none");
  			})
  		})
  		
  		
  		// 患者签名初始化
         window.canvasIsEmpty = "Y" //用于判断是否有手写签名，默认是空，无签名 =>jSignature.js中开启画笔后就会改变这个值。
         var sigdiv = $("#signature");
         sigdiv.jSignature('init', {
             height: '100%',
             width: '100%',
             color: "#000",
             lineWidth: 7
         });
         
        //患者签名
        $("#signStatusWrap").on("click", function () {
            $("#signWrap").addClass("flex disable-touch");
             	getOSSAuth();
                $("#loadingStatus").css({
                    "width": "0"
                }); //进度条置零
                $("#loadingStatus span").text(""); //清除进度显示文字

            $("#closeSign").on("click", function () {
                reset();
                $("#signWrap").removeClass("flex disable-touch");
            });
        })

        //患者签名重置
        function reset() {
            var $sigdiv = $("#signature");
            $sigdiv.jSignature("reset");
            if (window.canvasIsEmpty === "Y") {
                $("#signWrap").removeClass("flex");
            }
            window.canvasIsEmpty = "Y";
        }

        //保存签名
        function jSignature_img() {
            if (window.canvasIsEmpty === "Y") {
                layer.msg("请签名");
                return false;
            }
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.crossOrigin = "anonymous";
            window.signatureSrc = i.src;

            //封装blob对象  
            var blob = convertBase64UrlToBlob(i.src);
            upload(blob)
        }

        function convertBase64UrlToBlob(urlData) {
            var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], {
                type: 'image/png'
            });
        }

        /* 图片上传 */
        var hostUrl = window.location.protocol + "//" + window.location.host + "/yunjingservice/";
        var accessid = '',
            policy = '',
            Signature = '',
            key = 'hzsign/${user_id.substring(0, 4)}/${param.tx_time}${param.tx_number}.png',
            host = '',
            expire = 0,
            now = 0;
        // 可以判断当前expire是否超过了当前时间，如果超过了当前时间，就重新取一下，3s 做为缓冲
        function getOSSAuth() {
            now = Date.parse(new Date()) / 1000;
            if (expire < now + 3) {
                $.post(hostUrl + "OSSAuth/yjhzsign.shtml", function (data) {
                    accessid = data.accessid;
                    policy = data.policy;
                    signature = data.signature;
                    expire = data.expire;
                    host = data.host;
                });
            }
        }

        function get_suffix(filename) {
            pos = filename.lastIndexOf('.')
            suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        }

        function upload(blob) {
            getOSSAuth(); //获取授权
            var request = new FormData();
            request.append('OSSAccessKeyId', accessid);
            request.append('policy', policy);
            request.append('Signature', signature);
            request.append('key', key); //+filename
            request.append('success_action_status', '200'); //status头，如果不设置返回的是204
            request.append('Access-Control-Allow-Origin', '*');
            request.append('Access-Control-Allow-Methods', 'GET, POST');
            request.append("fileData", blob); //fileData为自定义 
            request.append('file', blob);
            request.append("imageName", blob);
            var timer = null;
            $.ajax({
                url: host,
                data: request,
                processData: false,
                cache: false,
                async: false,
                contentType: false,
                //关键是要设置contentType 为false，不然发出的请求头 没有boundary
                type: "POST",
                beforeSend: function () {
                    var width = 1;
                    timer = setInterval(function () {
                        $("#loadingStatus").css({
                            "width": width + "%"
                        });
                        $("#loadingStatus span").text("上传中" + width + "%")
                        width++;
                        if (width == 98) {
                            clearInterval(timer)
                        }
                    }, 68)
                },
                success: function (data, textStatus, request) {
                    if (request.status == '200') {
                        reset();
                        clearInterval(timer)
                        $("#loadingStatus").css({
                            "width": "100%"
                        });
                        $("#signWrap").removeClass("flex");
                        $("#user_sign_delete").show();
                        $("#user_sign_img").attr("src", signatureSrc);
                        layer.msg('签名保存成功！');
                        $("#signStatusWrap input").val("已签名").addClass("sign-color")
                    } else {
                        layer.msg('上传失败，请重试！');
                        clearInterval(timer)
                        $("#loadingStatus").css({
                            "width": "0"
                        });
                        $("#loadingStatus span").text(" ")
                    }
                    $.post("txform/updatehzqm.shtml",{tx_hz_qm:"https://biangene.oss-cn-shenzhen.aliyuncs.com/"+key,tx_number:"${param.tx_number}",tx_time:"${param.tx_time}"},function(){});           
                },
                error: function (data, textStatus, request) {
                    layer.msg('上传失败，请重试！');
                    clearInterval(timer)
                    $("#loadingStatus").css({
                        "width": "0"
                    });
                    $("#loadingStatus span").text(" ")
                },
                complete: function () {
                    $("#loadingStatus").css({
                        "width": "0"
                    });
                    $("#loadingStatus span").text(" ")
                }
            });
        }
        
        //标记位点 ******************************************************** S
        var xgtl_ccwd_page=null;
        var zlxj_to_wd_flag = "zlxj";
	    $("#tx_form").on("click",".xgtl_ccwd_page",function(){
	    	var tx_number = '${param.tx_number}';
			var user_id = '${userinfo.USER_ID.substring(0, 4)}';
			var zlxj_to_wd_flag = window.parent.window.zlxj_to_wd_flag;
			var randomNum = parseInt(Math.random()*10000000);
			$("#ossPointMarkImg_m").attr("src","https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/"+ user_id +"/"+ tx_number +".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v="+randomNum);
			$("#ossPointMarkImg_m").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v=20180126';")
    		$("#mtxselectCcwdWrap").show();
    		previewMark()
			
    		//更换图片
			$("#change_pic_btn").off("click").on("click",function(){
	     		layer.confirm('更换图片后原有标记将被清除!', {
		            icon: 3,
		            title: '提示'
		        }, function (index) {
					$("#changePicInput").click()
		
		            layer.close(index);
		        }, function (index) {
					
		        });
			})
	   });
	   
	   function previewMark() {
	   		$.ajax({  
          		type : "POST",
          		data :{"tx_number":tx_number,"list_type":"0"},  
          		url : "xgtl/xgtlwdtlist.shtml",           		  
          		async : false,
          		timeout : 10000,  
          		success : function(res){
          			if(res.status.length == 0){
          				$("#markListTbody").html('<tr><td colspan="3">暂无位点记录数据</td></tr>');
          				return false;
          			}
          			
          			var data = res.status;
          			var resArr ={data:data} ;
					//渲染历史记录模板
					var $ListHtml = template('markListTpl_a',resArr);
					$("#markListTbody").html($ListHtml);
					$("#pointMarkList .mark-point-text").each(function(i,v){//移除位点为空的使用记录
						if($(v).find("span").eq(0).text() === "" || $(v).find("span").eq(1).text() === ""){
							$(v).parent().remove()
						}
					})
					if($("#pointMarkList .mark-point-text").length == 0){
						$("#markListTbody").html('<tr><td colspan="3" align="center">暂无位点记录数据</td></tr>');
					}
          		}
          	})
	   
	   		$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
			if(res.status.length == 0){
				$("#mark_tips").text("暂无位点标记数据");
				return
			}
			$(".save-mark").text("保存")
			$("#point_mark_img_wrap1_m").find("div").remove();
			var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
			 	mark_A = mark_data.A,
			 	mark_V = mark_data.V,
			 	mark_T = mark_data.T;
			if(mark_data.status == "empty"){
	     			return false;
	     		}
			if(mark_A.length == 0 && mark_V == 0){
				return
			}
			$("#xgtl_mark_a").empty();
			mark_A.map(function (i, v) {
				//console.log(i)
				var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_a1 = '<div class="mark-num-child" style="position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:#fff;" data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';
				var num = parseInt(i.markNum);
				var markDom = '<div onclick="selectMarkB(this)" class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + tag_div_a1 + '</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
				$("#xgtl_mark_a").append("<option value='"+num+"'>"+num+"</option>");
			})
			$("#xgtl_mark_v").empty();
			mark_V.map(function (i, v) {
				//console.log(i)
				var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_v1 = '<div class="mark-num-child" style="position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:#fff;" data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';	
				var num = parseInt(i.markNum);
				var markDom = '<div onclick="selectMarkB(this)" class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + tag_div_v1 +'</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
				$("#xgtl_mark_v").append("<option value='"+num+"'>"+num+"</option>");
			})

			mark_T.map(function (i, v) {
				//console.log(i)
				var markDom = '<div class="add-mark-text-wrap" data-left=' + i.left + ' data-top=' + i.top +' data-width='+i.width+' style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%">'
								+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
								+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
								+'</div>'	
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
			})
			var scale = $("#point_mark_img_wrap1_m").outerWidth() / 600 * 100; //PC端的图片容器宽度为600，计算缩放比例
			//console.log(scale)
			$("#point_mark_img_wrap1_m .mtx-mark-tag").each(function (i, v) {
				var $that = $(this),
					width = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100,
					left = parseInt($that.data("left")) * scale / 100,
					top = parseInt($that.data("top")) * scale / 100;
				$that.css({
					"left": left + "px",
					"top": top + "px",
					"width": width + "px",
					"height": height + "px",
					"line-height": height + "px",
					"border-radius": height / 2 + "px"
				})
				
				var $line = $that.find(".mark-line");
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
				if($("#point_mark_img_wrap1_m").outerWidth() / 600 < 0.7 ){
					$("div.mark-num-child").css({
						"font-size": "12px"
					})
					$that.css({
						"font-size": "12px",
						"transform": "scale(1.2,1.2)"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.83333)"
					})
				}
				if($("#point_mark_img_wrap1_m").outerWidth() / 600 > 1.17 ){//屏幕宽度大于720px
					$("div.mark-num-child").css({
						"font-size": "24px"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				}
			})
			
			$("#point_mark_img_wrap1_m .add-mark-text-wrap").each(function (i, v) {
				var $that  = $(this),
					width  = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100;
				$that.css({
					"height": height + "px"
				})
				
				var $line = $that.find(".mark-text-line");
				console.log($line.width(),scale)
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
			})
		  
		    $("#pointMarkList .mark-point-text").each(function(i,v){//移除位点为空的使用记录
				if($(v).find("span").eq(0).text() === "" || $(v).find("span").eq(1).text() === ""){
					$(v).parent().remove()
				}
			})
			if($("#pointMarkList .mark-point-text").length == 0){
				$("#markListTbody").empty().append('<tr><td colspan="3" align="center">暂无位点记录数据</td></tr>');
			}
			
			//高亮上次的位点标识
			var lastMark_a = parseInt($(".mark-point").eq(1).find(".mark-a").text()) || $("#xgtl_mark_a").val();
			var lastMark_v = parseInt($(".mark-point").eq(1).find(".mark-v").text()) || $("#xgtl_mark_v").val();
			console.log(lastMark_v)
			$(".mark-target-a"+lastMark_a).addClass("active");
			$("#xgtl_mark_a").val(lastMark_a);
			$(".mark-target-v"+lastMark_v).addClass("active");
			$("#xgtl_mark_v").val(lastMark_v);
		  })
		}
		
		// 点击选择框切换图标样式
		function selectMarkA(select, markele) {
			var mark = $(select + " option:selected").val();
			$(markele).each(function (i, v) {
				var index = $(this).data("num");
				if (mark == index) {
					$(this).addClass("active").siblings(markele).removeClass("active");
					return false;
				}
			})
		}
		
		// 点击图标切换下拉框的值
		function selectMarkB(ele){
			var index = $(ele).data("num");
			if ($(ele).hasClass("mark-target-a")) {
				$(ele).addClass("active").siblings(".mark-target-a").removeClass("active");
				$("#xgtl_mark_a").val(index)
			} else {
				$(ele).addClass("active").siblings(".mark-target-v").removeClass("active");
				$("#xgtl_mark_v").val(index)
			}
		}
			
		function closedMarkList(){
  			$("#mtxselectCcwdWrap").hide()
  		}
  		function saveMarkList(){
  			var mark_a = $("#xgtl_mark_a option:selected").val();
			var mark_v = $("#xgtl_mark_v option:selected").val();
			if(!mark_a){
				layer.msg("A端位点标记为空!")
				return
			}
			if(!mark_v){
				layer.msg("V端位点标记为空!")
				return
			}
			$("#selectMark_a").val(mark_a);
			$("#selectMark_v").val(mark_v);
			$("#selectMark_show").val("A端：" + mark_a + " , V端："+ mark_v);
  			$("#mtxselectCcwdWrap").hide();
  		}
		
		/** 获取图片名称 **/
        var xgtlPicFile = document.querySelector('#changePicInput');

        if (window.FormData) {
            // 压缩图片需要的一些元素和对象
            var xgtlPic_reader = new FileReader(),
                xgtlPic_img = new Image();

            // 选择的文件对象
            var xgtlPic_file = null;

            // 缩放图片需要的canvas
            var xgtlPic_canvas = document.createElement('canvas');
            var xgtlPic_context = xgtlPic_canvas.getContext('2d');

            // base64地址图片加载完毕后
            xgtlPic_img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 计算出目标压缩尺寸
                var maxWidth = 600,
                    maxHeight = 800;

                // 目标尺寸
                var targetHeight, targetWidth;
                //targetWidth = 600;targetHeight = 600*1.7778;

                // 按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));

                //按照高度限定尺寸
                /* targetHeight = maxHeight;
				targetWidth = Math.round(maxHeight * (originWidth / originHeight)); */
                xgtlPic_canvas.width = targetWidth;
                xgtlPic_canvas.height = targetHeight;

                // 清除画布
                xgtlPic_context.clearRect(0, 0, targetWidth, targetHeight);

                // 图片压缩
                xgtlPic_context.drawImage(xgtlPic_img, 0, 0, targetWidth, targetHeight);

                // 转为blob并上传
                xgtlPic_canvas.toBlob(function (blob) {
					upload_xgtl(blob)
                }, xgtlPic_file.type || 'image/png');
            };

            // 文件base64化，以便获知图片原始尺寸
            xgtlPic_reader.onload = function (e) {
                // 图片尺寸
                xgtlPic_img.src = e.target.result;
                if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){//ios需主动调用上传方法
                	var i = new Image();
		            i.src = e.target.result;
		            i.crossOrigin="anonymous";
		            
				    //封装blob对象  
					var  blob = convertBase64UrlToBlob(i.src); 
		            upload_xgtl(blob)
                }
                
            };
            xgtlPicFile.addEventListener('change', function (event) {
                xgtlPic_file = event.target.files[0];
                if (xgtlPic_file.type.indexOf("image") === 0) {
                    xgtlPic_reader.readAsDataURL(xgtlPic_file);
                } else {
                    layer.alert("仅支持图片格式为jpg、gif、bmp、png、jpeg的文件！")
                }
            });
        }

        //上传图片到OSS
        var accessid_xgtl = '',
            policy_xgtl = '',
            signature_xgtl = '',
            Signature_xgtl = '',
            key_xgtl = "xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number + ".png",
            host_xgtl = '',
            expire_xgtl = 0,
            now_xgtl = 0;
        //var accessid='',policy='', Signature='', key="xgtl/${userinfo.USER_ID.substring(0, 4)}/xgtl_operation02.png" ,host='',expire = 0,now = 0;
        //获取授权
        function getOSSAuth_xgtl() {
            now_xgtl = Date.parse(new Date()) / 1000;
            if (expire_xgtl < now_xgtl + 3) {
                $.post(window.location.protocol + "//" + window.location.host + "/yunjingservice/OSSAuth/yjxgtl.shtml", function (data) {
                    accessid_xgtl = data.accessid;
                    policy_xgtl = data.policy;
                    signature_xgtl = data.signature;
                    expire_xgtl = data.expire;
                    host_xgtl = data.host;
                });
            }
        }

		//上传血管通路图片
        function upload_xgtl(blob) {
            getOSSAuth_xgtl(); //获取授权
            var index_up = layer.msg("图片上传中...", {
                        time: 8000
                    })
            var fileval = $("input[name='mark_img']").val();
            var request = new FormData();
            request.append('OSSAccessKeyId', accessid_xgtl);
            request.append('policy', policy_xgtl);
            request.append('Signature', signature_xgtl);
            request.append('key', key_xgtl); //+filename
            request.append('success_action_status', '200'); //status头，如果不设置返回的是204
            request.append('Access-Control-Allow-Origin', '*');
            request.append('Access-Control-Allow-Methods', 'GET, POST');
            request.append('file', $("#changePicInput")[0].files[0]);
            $.ajax({
                url: host_xgtl,
                data: request,
                processData: false,
                cache: false,
                async: false,
                contentType: false,
                //关键是要设置contentType 为false，不然发出的请求头 没有boundary
                type: "POST",
                beforeSend: function () {
                },
                success: function (data, textStatus, request) {
                    console.log(textStatus)
                    $("#changePicInput").val("");
                    var changePic = layer.load(2, {
                        time: 10 * 1000
                    });
                    $("#point_mark_img_wrap1_m div.add-mark-text-wrap").remove();
                    $("#point_mark_img_wrap1_m div.mtx-mark-tag").remove();
                    var time = Date.parse(new Date());
                    $("#ossPointMarkImg_m").attr("src",
                        "https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${userinfo.USER_ID.substring(0, 4)}/" +
                        tx_number + ".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&tag=" + time);

                    document.getElementById("ossPointMarkImg_m").onload = function () {
                        layer.close(changePic)
                        $("select").empty();
                        $("#xgtl_mark_a,#xgtl_mark_v").attr("disabled", "disabled")
                        layer.msg("图片上传成功");
                        $("#selectMark_a").val("");
						$("#selectMark_v").val("");
						$("#selectMark_show").val("");
						$("#mtxselectCcwdWrap .save-mark").removeAttr("onclick");
						document.getElementById("ossPointMarkImg_m").onload = null;
                    }
                    
                    // 清除原来的标记
                    var sendDatas = {
                        "status": "empty"
                    };
                    var datas = {};
                    if (xgtlTagId) { 
                        datas = {
                            "tx_id": xgtlTagId,
                            "tx_number": tx_number,
                            "tx_xgtl_a": "",
                            "tx_xgtl_v": "",
                            "tx_xgtl_text": JSON.stringify(sendDatas)
                        }

                        $.post("xgtl/updatexgtlwdt.shtml", datas, function (res) {
                            if (res.status != 0) {
                                console.log("清除历史标记成功")
                            } else {
                                console.log("清除历史标记失败")
                            }
                        })
                    }
                },
                error: function (data, textStatus, request) {
                    layer.msg("上传失败，请重试！");
                },
                complete: function () {
                    layer.close(index_up)
                }
            });
        }
    </script>
</html>